<template>
    <div class="mobileLogin">
        <div class="mbLogin">
            <div class="mbLeft" @click="phoneClick(1)">手机号登录</div>
            <div class="mbRight" @click="phoneClick(2)">密码登录</div>
        </div>
        <div class="mbInput" v-show="showNumber==1">
            <input type="text" class="mbNumber" placeholder="请输入手机号" v-model="value1"> <br />
            <input type="text" class="mbVerity" placeholder="请输入验证码" v-model="value2">  <span class="codeVerity">获取验证码</span>
        </div>
        <div class="mbInput" v-show="showNumber==2">
            <input type="text" class="mbNumber" v-model="form.userName" placeholder="请输入手机号"> <br />
            <input type="password" class="mbVerity"  v-model="form.passWord" placeholder="请输入密码"> 
        </div>
        <div class="agreement">
            <input type="radio" name="circle" id="circle">
            <span class="agree">阅读并同意</span>
            <span class="clause">《淘立堡服务条款》</span>
        </div>
        <div class="button">
        <input type="button" class="clickBtn" placeholder="立即登录"><span class="quickLogin"  @click="login">立即登录</span>
        </div>
        


    </div>
</template>

<script>

export default {
    name: "LoginMobile",
    data() {
        return {
            showNumber:1,
            form:{
                userName:"",
                passWord:""
            },
            value1:"",
            value2:""
        }
    },
    mounted(){
        console.log(this)
    },
    methods:{
        phoneClick(value){
            this.showNumber = value
        },
        login(){
            console.log(122)
            let data = {}
            data.value1 = this.value1
            data.value2 = this.value2
            // {value1:123,value2:"1231"}
            if(this.showNumber==1){
                // 下面开始掉用手机号验证码的登录
                this.$post("/loginphone",data).then(res=>{

                })
                .catch(()=>{

                })
            }
            console.log(this.showNumber)
            if(this.showNumber==2){
                
                this.$post("/login",this.form).then(res=>{
                    console.log(res)
                })
                .catch(()=>{

                })
                // 下面开始掉用手机号密码的登录
            }
        }
    }

}
</script>

<style lang="less" scoped>
    .mobileLogin{
        width: 100%;
        margin-top: 0.4rem;
        .mbLogin{
            display: flex;
            width: 4.8rem;
            height: 0.8rem;
            line-height: 0.8rem;
            margin:0.4rem auto;
            .mbLeft,.mbRight{
                flex: 1;
            }
            .mbLeft{
                // 以下面的背景图片插进去也很好的方式
                // background: url("../../assets/images/login/mbLeft.png") no-repeat left center;
                border: 1px solid #f00;
                background-color: #f00;
                border-radius: 0.5rem 0 0 0.5rem;
                background-size: 100% 100%;
                color: #ffffff;
                font-size: 0.3rem;
                text-align: center;
            }
            .mbRight{
                // 以下面的背景图片插进去也很好的方式
                // background: url("../../assets/images/login/mbRight.png") no-repeat left center;
                border: 1px solid #f00;
                border-radius: 0 0.5rem 0.5rem 0;                
                background-size: 100% 100%;
                color: #f00;
                font-size: 0.3rem;
                text-align: center;  
            }
        }
        .mbInput{
            margin-top: 1.2rem;
            position: relative;
            // border: 1px solid blue;
            height: 2.2rem;
            input::-webkit-input-placeholder{
                position: relative;
                left: 0.1rem;
            } 
            input:focus{
                outline:none;
            }
            input{
                width: 5.7rem;
                height: 0.92rem;
                background-size: 100% 100%;
                border:1px solid #919191;
                border-radius: 0.5rem;
                position: absolute;
                left: 50%;
                margin-left: -2.85rem;
                font-size: 0.3rem;
                color: #919191;
                caret-color: #f00;
                padding-left: 0.8rem;
                box-sizing: border-box;
            }
            .mbNumber{
                background: url("../../assets/images/login/mb.png") no-repeat 0.3rem center;
                background-size: 0.4rem 0.4rem;
            }
            .mbVerity{
                margin-top: 0.9rem;
                position: absolute;
                background: url("../../assets/images/login/tip.png") no-repeat 0.3rem center;
                background-size: 0.4rem 0.4rem;

            }

            .codeVerity{
            //   border: 1px solid red; 
                height: 0.8rem; 
                display: inline-block;
                font-size: 0.3rem;
                color: #919191;
                position: absolute;
                margin-top: 0.97rem;
                margin-left: 4.5rem;
                background: url("../../assets/images/login/shu.png") no-repeat left center;
                background-size: 0.03rem 0.55rem; 
                padding-left: 0.3rem;
                line-height: 0.8rem;
            }
        }
        .agreement{
            margin: 0.7rem 0 0 0.78rem;
            height: 0.5rem;
            width: 4.5rem;
            line-height: 0.5rem;
            margin-top: 0.7rem;
            position: absolute;
            // border: 1px solid red;
            font-size: 0.28rem;
            position: relative;
            // text-align: center;
            input{
                width: 0.3rem;
                height: 0.3rem;
                margin-top: 0.11rem;
            }
            .agree{
                display: inline-block;
                color: #919191;
                position: absolute;
                margin-left: 0.02rem;

            }
            .clause{
                display: inline-block;
                color: #f00;
                position: absolute;
                margin-left: 1.4rem;
            }
        }
        .button{
            width: 100%;
            height: 0.92rem;
            position: relative;
            .clickBtn{
                display: block;
                width: 5.7rem;
                height: 0.92rem;
                margin: 0.5rem auto;
                border-radius: 0.5rem;
                outline: none;
                border: 0;
                background-color: #B0B0B0;
                box-shadow: 0.05rem 0.05rem 0.05rem #BBC0C1;
            }
            .quickLogin{
                display: inline-block;
                color: white;
                font-size: 0.34rem;
                position: absolute;
                margin-top: -1.2rem;
                left: 50%;
                margin-left: -0.6rem;
            }
        }
    }
</style>